// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import "../Components"

AndroidItem {
    id: _root
    width: 720 * viewScale
    height: 96 * viewScale
    clip: true
    color: "#000000"

    property variant naviBarBackGroundPath: []  //ナビバー（背景）
    property variant naviKeyBackPath: []         //ナビキー（戻る）
    property variant naviKeyExpandPath: []       //ナビキー（ノティファイ開く）
    property variant naviKeyHomePath: []         //ナビキー（ホーム）
    property variant naviKeyMenuPath: []         //ナビキー（メニュー）
    property variant naviKeyRecentPath: []       //ナビキー（履歴）

    property real keyWidth: 144 * viewScale
    property real keyHeight: 96 * viewScale

    signal clicked(int key)

    Image{
        id: _naviBarBackGround
        anchors.fill: parent
        cache: false
        source: _root.naviBarBackGroundPath[0]
    }

    Grid{
        id: _btnGrid
        columns: 5
        rows: 1
        opacity: _root.isLock ? 0.001 : 1.0
        ImageButton{
            id: _btnBack
            width: keyWidth
            height: keyHeight
            clip: true
            fillMode: Image.PreserveAspectFit
            imageIdle: _root.naviKeyBackPath[0]
            imagePress: _root.naviKeyBackPath[0]
            onClicked: _root.clicked(1);
            onPressed: _root.press(x, y);
            onReleased: _root.release();
        }
        ImageButton{
            id: _btnMenu
            width: keyWidth
            height: keyHeight
            clip: true
            fillMode: Image.PreserveAspectFit
            imageIdle: _root.naviKeyMenuPath[0]
            imagePress: _root.naviKeyMenuPath[0]
            onClicked: _root.clicked(2);
            onPressed: _root.press(x, y);
            onReleased: _root.release();
        }
        ImageButton{
            id: _btnHome
            width: keyWidth
            height: keyHeight
            clip: true
            fillMode: Image.PreserveAspectFit
            imageIdle: _root.naviKeyHomePath[0]
            imagePress: _root.naviKeyHomePath[0]
            onClicked: _root.clicked(3);
            onPressed: _root.press(x, y);
            onReleased: _root.release();
        }
        ImageButton{
            id: _btnExpand
            width: keyWidth
            height: keyHeight
            clip: true
            fillMode: Image.PreserveAspectFit
            imageIdle: _root.naviKeyExpandPath[0]
            imagePress: _root.naviKeyExpandPath[0]
            onClicked: _root.clicked(4);
            onPressed: _root.press(x, y);
            onReleased: _root.release();
        }
        ImageButton{
            id: _btnRecent
            width: keyWidth
            height: keyHeight
            clip: true
            fillMode: Image.PreserveAspectFit
            imageIdle: _root.naviKeyRecentPath[0]
            imagePress: _root.naviKeyRecentPath[0]
            onClicked: _root.clicked(5);
            onPressed: _root.press(x, y);
            onReleased: _root.release();
        }
    }

    function press(x, y){
        _btnPress.x = x + keyWidth * 0.5 - _btnPress.width * 0.5;
        _btnPress.y = y + keyHeight * 0.5 - _btnPress.height * 0.5;
        _btnPress.visible = true;
    }
    function release(){
        _btnPress.visible = false;
    }

    //押下時の青い円
    Rectangle{
        id: _btnPress
        x: _root.width / 2 - width / 2
        y: _root.height / 2 - height / 2
        width: keyWidth * 1.2
        height: width
        radius: width / 2
        visible: false
        opacity: 0.6
        color: "#33aadd"
    }

    states: [
        State {
            name: "Land"
            when: !isPortrait
            PropertyChanges {
                target: _root
                keyWidth: 84 * viewScale
                keyHeight: 144 * viewScale
                rotation: 180
            }
            PropertyChanges {
                target: _naviBarBackGround
                source: _root.naviBarBackGroundPath[1]
            }
            PropertyChanges {
                target: _btnPress
                width: keyHeight * 1.2
            }
            PropertyChanges {
                target: _btnGrid
                columns: 1
                rows: 5
            }
            PropertyChanges {
                target: _btnBack
                rotation: 180
                imageIdle: _root.naviKeyBackPath[1]
                imagePress: _root.naviKeyBackPath[1]
            }
            PropertyChanges {
                target: _btnMenu
                rotation: 180
                imageIdle: _root.naviKeyMenuPath[1]
                imagePress: _root.naviKeyMenuPath[1]
            }
            PropertyChanges {
                target: _btnHome
                rotation: 180
                imageIdle: _root.naviKeyHomePath[1]
                imagePress: _root.naviKeyHomePath[1]
            }
            PropertyChanges {
                target: _btnExpand
                rotation: 180
                imageIdle: _root.naviKeyExpandPath[1]
                imagePress: _root.naviKeyExpandPath[1]
            }
            PropertyChanges {
                target: _btnRecent
                rotation: 180
                imageIdle: _root.naviKeyRecentPath[1]
                imagePress: _root.naviKeyRecentPath[1]
            }
        }
    ]
}
